<script setup lang='ts'>
import proLists from '../../components/proLists.vue'
import { proListsApi, getCategoryApi, searchProApi } from '../../api/product'
import { ref, reactive } from 'vue';
const prolist = ref(null)
const categoryList = ref(null)
// 获取全部商品列表
proListsApi().then((res: any) => {
    prolist.value = res.data
})
// 获取分类数据
getCategoryApi().then((res: any) => {
    categoryList.value = res.data
})

const value = ref('全部')
const input = ref('')

function filterfn() {
    let category = value.value
    if (category == '全部') category = ''

    searchProApi({
        category,
        search: input.value
    }).then((res: any) => {
        console.log(res);
        prolist.value = res.data
    })
}
</script>
<template>
    <div class="search">
        <!-- 类别 -->
        <el-select v-model="value" style="width: 120px;">
            <el-option key="全部" label="全部" value="全部" />
            <el-option v-for="item in (categoryList as any)" :key="item" :value="item" />
        </el-select>
        <!-- 关键字 -->
        <el-input v-model="input" placeholder="请输入需要查询的名称" style="width: 180px;" />
        <el-button type="primary" @click="filterfn">搜索</el-button>
    </div>
    <proLists v-if="prolist" :data="prolist" :key="prolist" :isSale="true" :isSecKill="true" :isRecommend="true" />
</template>
<style scoped>
.search {
    display: flex;
    gap: 8px;
    margin-bottom: 5px;
}
</style>